import draggable from "vuedraggable";
import { uuid } from '@src/util/lang/string.ts'
import './BaseNestDraggable.scss';

const BaseNestItem = {
  name: 'base-nest-item',
  props: {
    item: {
      type: Object,
      default: {}
    },
    itemKey: {
      type: String,
      default:()=> ''
    }
  },
  render(h) {
    return (
      <div class="nested-draggable-block">
        <div class="nested-draggable-name">
          <span class="nested-draggable-name-label">
            <i class="iconfont icon-tuozhuaipaixu"></i>
          </span>
          <span class="nested-draggable-name-text">{this.item[this.itemKey]}</span>
        </div>
        {
          Array.isArray(this.item.lists) && this.item.lists.length > 0
          &&
          <base-nest-draggable lists={this.item.lists}></base-nest-draggable>
        }
      </div>
    );
  },
};

const NestedDraggable = {
  name: 'base-nest-draggable',
  props: {
    lists: {
      required: true,
      type: Array,
      default: () => []
    },
    listKey: {
      type: String,
      default: () => 'name'
    }
  },
  data() {
    return {
      drag: false
    };
  },
  methods: {
    sortListDragStartEventHandler(event) {
      this.drag = true;
    },
    sortListDragEndEventHandler(event) {
      this.drag = false;
      this.$emit('sortListDragEndEventHandler', this.lists);
    }
  },
  render(h) {
    return (
      <draggable
        animation="180"
        class="base-nested-draggable"
        tag="div"
        list={this.lists}
        onStart={event => this.sortListDragStartEventHandler(event)}
        onEnd={event => this.sortListDragEndEventHandler(event)}
      >
        {this.$slots.item ? 
          this.$slots.item : 
          (this.lists.map(item=> {
            return <base-nest-item key={uuid()} item={item} itemKey={this.listKey}></base-nest-item>;
          })
          )}
      </draggable>
    );
  },
  components: {
    draggable,
    BaseNestItem
  }
};

export default NestedDraggable;